<template>
  <div class="customer-card">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="onChangeTab">
      <el-tab-pane label="客户阶段转换漏斗" name="2">
        <LineChart :completionData="completionData" :deliveryData="deliveryData" :params="params"></LineChart>
      </el-tab-pane>
      <el-tab-pane label="员工TOP10" name="4">
        <LineChartTwo @eventData="eventData" :completionDatatwo="completionDatatwo" :deliveryDatatwo="deliveryDatatwo" :paramstwo="paramstwo" :timedata="timedata"></LineChartTwo>
      </el-tab-pane>
      <el-tab-pane label="客户阶段走势" name="6">
        <LineChartThree @targetData="targetData" :completionDatathree="completionDatathree" :deliveryDatathree="deliveryDatathree" :paramsthree="paramsthree" :timedata="timedata"></LineChartThree>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { getFollowList, getWXGroup } from '@/api/customerCenter'
import { getBoardfunnel, getBoardtop, getBoardtrend } from '@/api/customerbulletin/bulleinManage'
import { useStore } from '@/store'
// import { getDay } from '@/utils/timeCycle'
import { getDay } from '@/utils/utils'
import ZWPagination from '@/components/ZWPagination.vue'
import CardTitle from './CardTitle.vue'
import Tags from './Tags.vue'
import Carousel from './Carousel.vue'
import LineChart from './LineChart.vue'
import LineChartTwo from './LineChartTwo.vue'
import LineChartThree from './LineChartThree.vue'

const route = useRoute()
let store = useStore()

const props = withDefaults(
  defineProps<{
    params: any
  }>(),
  {
    params: {}
  }
)
const params = ref([])
const paramstwo = ref([])
const paramsthree = ref([])
const activeName = ref('2')
const lineChart = ref()
const searchInfo = ref()
const completionData = ref([])
const deliveryData = ref([])
const completionDatatwo = ref([])
const timedata=ref()
const deliveryDatatwo = ref([])
const completionDatathree = ref([])
const deliveryDatathree = ref([])
const objevent = { type: '1', time_type: '-1', stage_id: '-1' }
const objtarget = { time_type: '1' }
// const emit = defineEmits(['initFun']);
// 获取页面初始化数据
const getData = () => {
  let newData: any = []
  getBoardfunnel(props.params).then((data: any) => {
    data.transform.forEach((item: any) => {
      newData.push({
        value: item.num,
        name: item.name
      })
    })
    completionData.value = newData
    deliveryData.value = data.transform_list
    params.value = props.params
  })
}
const getDatatwo = () => {
  let newData: any = []
  timedata.value=props.params
  let objall = Object.assign({ ...objevent, ...props.params })
  getBoardtop(objall).then((data: any) => {
    data.chart.forEach((item: any) => {
      newData.push({
        value: item.num,
        name: item.name
      })
    })
    completionDatatwo.value = newData
    deliveryDatatwo.value = data.list
    paramstwo.value = props.params
  })
}
const getDatathree = () => {
  let newData: any = []
  let newDatatwo: any = []
  let objall = Object.assign({ ...objtarget, ...props.params })
  getBoardtrend(objall).then((data: any) => {
    completionDatathree.value = data
    deliveryDatathree.value = data
    paramsthree.value = objall
  })
}
const eventData = (data: any) => {
  objevent.time_type = data.time_type
  objevent.type = data.type
  objevent.stage_id = data.stage_id
  getDatatwo()
}
const targetData = (data: any) => {
  objtarget.time_type = data
  getDatathree()
}
const onChangeTab = (e?: any) => {
  activeName.value = e || '2'
  if (activeName.value == '2') {
    getData()
  } else if (activeName.value == '4') {
    getDatatwo()
  } else if (activeName.value == '6') {
    getDatathree()
  }
}

const onZWPagination = (e: any) => {
  console.log('onZWPagination', e)
}

const onOpenPage = (url: string) => {
  window.open(url)
}

onMounted(() => {
  // getData()
})
defineExpose({ onChangeTab, activeName }) //像父组件抛出方法
</script>

<style lang="scss" scoped>
.customer-card {
  border: 1px solid #eaeaea;
  background-color: #fff;

  .link-box {
    margin-top: 10px;

    .el-col {
      padding: 10px;
    }
    .item-box {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      background: #f9f9f9;
      border-radius: 1px;
      border: 1px solid #eaeaea;
      cursor: pointer;

      .text {
        flex: auto;
        margin-right: 10px;

        p {
          margin: 0;

          &:first-of-type {
            margin-bottom: 6px;
            font-size: 14px;
            font-weight: 500;
            color: #33302d;
          }
          &:last-of-type {
            font-size: 12px;
            font-weight: 300;
            color: #969696;
            -webkit-line-clamp: 2;
          }
        }
      }

      .cover-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        vertical-align: middle;
        object-fit: cover;

        .image-slot {
          .el-icon {
            font-size: 36px;
          }
        }
      }
    }
  }

  :deep(.el-tabs__header) {
    padding: 0 24px;
  }
}
</style>
